import Image from 'next/image';
import { Tinos } from 'next/font/google';
import { cn } from '@/lib/cn';
import Link from 'next/link';
import { cva } from 'class-variance-authority';
import {
  BatteryChargingIcon,
  FileTextIcon,
  Heart,
  HeartIcon,
  SearchIcon,
  TimerIcon,
} from 'lucide-react';

const tinos = Tinos({
  weight: '400',
  subsets: ['latin'],
  variable: '--font-tinos',
});

const headingVariants = cva('font-tinos', {
  variants: {
    variant: {
      h2: 'text-3xl lg:text-4xl',
      h3: 'text-3xl',
    },
  },
});

const buttonVariants = cva(
  'inline-flex px-5 py-3 rounded-full font-medium tracking-tight transition-colors',
  {
    variants: {
      variant: {
        primary: 'bg-brand text-brand-foreground hover:bg-brand-200',
        secondary:
          'border bg-fd-secondary text-fd-secondary-foreground hover:bg-fd-accent',
      },
    },
    defaultVariants: {
      variant: 'primary',
    },
  },
);

const cardVariants = cva('rounded-2xl text-sm p-6 bg-origin-border shadow-lg', {
  variants: {
    variant: {
      brand: 'bg-brand text-brand-foreground',
      secondary: 'bg-brand-secondary text-brand-secondary-foreground',
      default: 'border bg-fd-card',
    },
  },
  defaultVariants: {
    variant: 'default',
  },
});

export default function Page() {
  return (
    <main
      className={cn(
        'text-landing-foreground dark:text-landing-foreground-dark',
        tinos.variable,
      )}
    >
      <div className="grid mx-auto w-full max-w-[1400px]">
        <div className="overflow-hidden col-start-1 row-start-1">
        </div>
        <div className="mt-auto dark text-landing-foreground mb-[max(100px,min(9vw,150px))] p-6 col-start-1 row-start-1 md:p-12">
          <h1 className="text-4xl mt-40 mb-12 leading-tighter font-tinos md:text-5xl lg:text-6xl">
            构建
            <br />
            你自己的文档站点
            <br />
            从未如此简单
          </h1>
          <div className="flex flex-col items-start gap-4 md:flex-row md:items-center">
            <Link href="/docs/ui" className={cn(buttonVariants())}>
              开始使用
            </Link>
          </div>
        </div>
      </div>
      <div className="grid grid-cols-1 gap-6 px-6 pb-6 mx-auto w-full max-w-[1400px] md:px-12 md:pb-12 md:gap-8 lg:grid-cols-2 lg:gap-10 xl:grid-cols-3 xl:gap-12">
        <p className="text-2xl tracking-tight leading-snug font-light col-span-full md:text-4xl xl:col-span-2">
          Hamster Docs 是一款专为 <span className="text-brand font-medium">React.js</span> 开发者设计的文档框架，
          它为你的文档工作流注入强大功能，并提供高度可定制性以匹配你的个性化需求，
          能够与任何 React.js 框架、CMS 或工具无缝集成协作。
        </p>
        <div className="p-8 bg-linear-to-b from-brand-secondary/40 rounded-xl col-span-full xl:col-span-1">
          <h2 className="text-6xl text-center mix-blend-overlay font-tinos">
            轻如鸿毛，美如皓月
          </h2>
        </div>
        <Aesthetics />
        <OpenSource />
        <Footer />
      </div>
    </main>
  );
}

function Aesthetics() {
  return (
    <>
      <div
        className={cn(
          cardVariants({
            variant: 'secondary',
            className:
              'flex items-center justify-center p-0 shadow-2xl hover:shadow-xl transition-shadow duration-300',
          }),
        )}
      >
        <div className="p-8 text-center">
          <h3 className="text-2xl font-bold mb-2">AI 智能文档</h3>
          <p className="text-lg">体验智能创作与高效管理，轻松掌控您的知识库。</p>
        </div>
      </div>
      <div className={cn(cardVariants())}>
        <h3
          className={cn(headingVariants({ variant: 'h3', className: 'mb-6' }))}
        >
          美观且可定制的主题
        </h3>
        <p>
          Hamster Docs 提供精美的主题，并支持无头模式以便于插入自定义 UI。
        </p>
      </div>
      <div className={cn(cardVariants({ className: 'flex flex-col' }))}>
        <p className="mb-4">
          内置浅色与深色主题，并支持系统主题自动切换。
        </p>
      </div>
    </>
  );
}

const searchItemVariants = cva(
  'rounded-md p-2 text-sm text-fd-popover-foreground',
);

function Search() {
  return (
    <div className="flex select-none flex-col mt-auto bg-fd-popover rounded-xl border mask-[linear-gradient(to_bottom,white_40%,transparent_90%)] max-md:-mx-4">
      <div className="inline-flex items-center gap-2 px-4 py-3 text-sm text-fd-muted-foreground">
        <SearchIcon className="size-4" />
        Search...
      </div>
      <div className="border-t p-2">
        {[
          ['入门指南', '在你的项目中使用 Hamster Docs。'],
          ['组件', '文档的 UI 组件。'],
          ['MDX 内容', '使用 MDX 作为内容。'],
          ['用户指南', '如何使用 Hamster Docs。'],
        ].map(([title, description], i) => (
          <div
            key={i}
            className={cn(
              searchItemVariants({
                className: i === 0 && 'bg-fd-accent',
              }),
            )}
          >
            <div className="flex flex-row items-center gap-2">
              <FileTextIcon className="size-4 text-fd-muted-foreground" />
              <p>{title}</p>
              {i === 7 && (
                <p className="ms-auto text-xs text-fd-muted-foreground">打开</p>
              )}
            </div>
            <p className="text-xs mt-2 text-fd-muted-foreground ps-6">
              {description}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer className="flex flex-col justify-center items-center bg-brand-secondary py-12 text-brand-secondary-foreground rounded-2xl">
      <p className="mb-1 text-3xl font-semibold">Hamster Docs</p>
      <p className="text-xs">
        Built with <HeartIcon className="inline size-4" /> by{' '}
        <a
          href="https://fuma-dev.vercel.app"
          rel="noreferrer noopener"
          target="_blank"
          className="font-medium"
        >
          Fuma
        </a>
      </p>
    </footer>
  );
}

function OpenSource() {
  return (
    <>
      <h2
        className={cn(
          headingVariants({
            variant: 'h2',
            className: 'mt-8 text-brand text-center mb-8 col-span-full',
          }),
        )}
      >
        梦想中的框架。
      </h2>

      <div className={cn(cardVariants({ className: 'flex flex-col' }))}>
        <Heart fill="currentColor" className="text-pink-500 mb-4" />
        <h3
          className={cn(
            headingVariants({
              variant: 'h3',
              className: 'mb-6',
            }),
          )}
        >
          由你创造可能。
        </h3>
        <p className="mb-8">
          Hamster Docs 100% 由热情和开源社区驱动。
        </p>
        <div className="mb-8 flex flex-row items-center gap-2">
          <Link
            href="/sponsors"
            className={cn(buttonVariants({ variant: 'primary' }))}
          >
            赞助商
          </Link>
          <a
            href="https://github.com/fuma-nama/fumadocs/graphs/contributors"
            rel="noreferrer noopener"
            className={cn(buttonVariants({ variant: 'secondary' }))}
          >
            贡献者
          </a>
        </div>
      </div>
      <div
        className={cn(
          cardVariants({
            className: 'flex flex-col p-0 pt-8',
          }),
        )}
      >
        <h2 className="text-3xl text-center font-extrabold font-mono uppercase mb-4 lg:text-4xl">
          构建你的文档
        </h2>
        <p className="text-center font-mono text-xs opacity-50 mb-8">
          轻盈而华丽，就像月亮一样。
        </p>
        <div className="h-[200px] mt-auto overflow-hidden p-8 bg-linear-to-b from-fd-primary/10">
          <div className="mx-auto bg-radial-[circle_at_0%_100%] from-60% from-transparent to-fd-primary size-[500px] rounded-full" />
        </div>
      </div>

      <ul
        className={cn(
          cardVariants({
            className: 'flex flex-col gap-6',
          }),
        )}
      >
        <li>
          <span className="flex flex-row items-center gap-2 font-medium">
            <BatteryChargingIcon className="size-5" />
            电池保证。
          </span>
          <span className="mt-2 text-sm text-fd-muted-foreground">
            积极维护，开放贡献。
          </span>
        </li>
        <li>
          <span className="flex flex-row items-center gap-2 font-medium">
            <svg viewBox="0 0 24 24" className="size-5" fill="currentColor">
              <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
            </svg>
            完全开源。
          </span>
          <span className="mt-2 text-sm text-fd-muted-foreground">
            开源，在 GitHub 上可用。
          </span>
        </li>
        <li>
          <span className="flex flex-row items-center gap-2 font-medium">
            <TimerIcon className="size-5" />
            几秒钟内。
          </span>
          <span className="mt-2 text-sm text-fd-muted-foreground">
            使用 CLI 即时初始化新项目。
          </span>
        </li>
        <li className="flex flex-row flex-wrap gap-2 mt-auto">
          <Link href="/docs/ui" className={cn(buttonVariants())}>
            阅读文档
          </Link>
          <a
            href="https://github.com/fuma-nama/fumadocs"
            rel="noreferrer noopener"
            className={cn(
              buttonVariants({
                variant: 'secondary',
              }),
            )}
          >
            打开 GitHub
          </a>
        </li>
      </ul>
    </>
  );
}
